<template>
  
  
    <!-- 
    <template #header>
      <div
        style="
          text-align: left;
          font-weight: bold;
          display: flex;
          justify-content: space-between;
        "
      >
        <span>角色信息</span>
      </div>
    </template> 
    -->

    
    <el-form :inline="true" :model="query" style="margin-bottom:10px;">
      <el-form-item label="状态">
        <el-select v-model="query.ro_status" @change="getPage(1)">
          <el-option label="全部" value=""></el-option>
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in ddo.dataStatus"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="编号">
        <el-input v-model="query.ro_id"></el-input>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="query.ro_name"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getPage(1)">查询</el-button>
        <template v-if="query.ro_status == '00'">
          <el-button type="primary" @click="openAdd">新增</el-button>
          <el-button type="primary" @click="execMultiDel">删除</el-button>
        </template>
      </el-form-item>
    </el-form>
  


    <el-table      
      :data="page.list"
      :stripe="true"
      :fit="true"
      :max-height="tableMaxHeight"      
      style="width: 100%;flex:auto;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="ro_id" label="编号" />
      <el-table-column prop="ro_name" label="名称" />
      <el-table-column prop="ro_remark" label="备注" />
      <el-table-column prop="ro_status" label="状态">
        <template #default="{ row }">
          <span
            :style="{
              color: ddo.dataStatusColorMap[row.ro_status],
              fontWeight: 'bold',
            }"
            >{{ ddo.text("dataStatus", row.ro_status) }}</span
          >
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="{ row }">
          <el-button
            v-if="row.ro_status == '00'"
            size="small"
            @click="openEdit(row)"
            >编辑</el-button
          >
          <el-button
            v-if="row.ro_status == '00'"
            size="small"
            type="danger"
            @click="execDel(row)"
            >删除</el-button
          >
          <el-button
            v-if="row.ro_status == '00'"
            size="small"
            type="primary"
            @click="changeStatus(row)"
            >确定</el-button
          >
          <el-button
            v-if="row.ro_status == '22' || row.ro_status == '77'"
            size="small"
            type="success"
            @click="changeStatus(row)"
            >启用</el-button
          >
          <el-button
            v-if="row.ro_status == '55'"
            size="small"
            type="danger"
            @click="changeStatus(row)"
            >禁用</el-button
          >

          <el-button
            v-if="row.ro_status == '22' || row.ro_status == '55' || row.ro_status == '77'"
            size="small"
            type="primary"
            @click="openModule(row)"
            >权限</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 22px"
      layout="sizes,prev, pager, next, jumper, ->, total"
      :total="page.total"
      v-model:page-size="query.pageSize"
      v-model:current-page="query.pageNum"
      :page-sizes="[1, 3, 5, 10, 15, 20, 30, 100]"
      @current-change="getPage"
      @size-change="getPage(1)"
    />
  

  <!-- 新增 -->
  <role-add ref="roleAddRef" @ok="getPage(page.last + 1)"></role-add>

  <!-- 修改 -->
  <role-upd ref="roleUpdRef" @ok="getPage(page.current)"></role-upd>

  <!-- 权限 -->
  <role-module ref="roleModuleRef" ></role-module>

  
</template>

<script setup >
import { ref, reactive,onMounted,computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { tip, get, post, put, del, ddo, elConfirm } from "@/common";


const tableMaxHeight = computed(()=>ddo.windowInnerHeight-325);

//多选处理
const multipleSelection = ref([]);
const handleSelectionChange = (selection) => {
  multipleSelection.value = selection;
};

//获取列表数据
const query = reactive({
  pageNum: 1,
  pageSize: 5,
  ro_id: "",
  ro_name: "",
  ro_remark:"",
  ro_status: "",
});
const page = ref({ total: 0 });

const getPage = (pageNo) => {
  query.pageNum = pageNo || 1;
  get("/security/role", query).then((result) => {
    page.value = result.data;
    query.pageNum = page.value.current;
    query.pageSize = page.value.pageSize;
  });
};

getPage(1);

//新增
import RoleAdd from "./role-add.vue";
const roleAddRef = ref();
const openAdd = () => {
  roleAddRef.value.open();
};

//修改
import RoleUpd from "./role-upd.vue";
const roleUpdRef = ref();
const openEdit = (row) => {
  roleUpdRef.value.open(row);
};

//删除
const execDel = (row) => {
  elConfirm("提示", "您确定删除该条角色信息吗？").then(() => {
    del(`/security/role/${row.ro_id}`).then((result) => {
      getPage(page.value.current);
      tip.success("删除角色信息成功！");
    });
  });
};

const execMultiDel = () => {
  if (multipleSelection.value.length == 0) {
    tip.error("请选择角色数据！");
    return;
  }
  elConfirm("提示", "您确定删除选中的角色信息吗？").then(() => {
    const ids = [];
    multipleSelection.value.forEach((row) => ids.push(row.ro_id));
    del(`/security/role`, ids).then((result) => {
      getPage(page.value.current);
      tip.success("删除角色信息成功！");
    });
  });
};

//改变状态
const changeStatus = (row) => {
  put(
    `/security/role/${row.ro_id}/${row.ro_status}`,
    {},
    { title: "提示", message: "您确定更新角色状态吗？" }
  ).then((result) => {
    tip.success(result.message);
    console.log("query->",query,"current->",page.value.current);
    getPage(page.value.current);
  });
};

//权限
import RoleModule from "./role-module.vue";
const roleModuleRef = ref();
const openModule = (row) => {
  roleModuleRef.value.open(row);
};


</script>

<style scoped>
.x {
}
</style>